<script>

export default {
  name: 'BlogPreview',
  data () {
    return {
      blog: {},
      show: false
    }
  },
  methods: {
    init (blogId) {
      this.$axios.get(`blog/info/${blogId}`).then(data => {
        this.blog = { ...data }
        this.show = true
      })
    }
  }
}
</script>

<template>
<el-dialog title="博客预览" :visible.sync="show">
  <div class="ql-container">
    <div class="title"><h2 v-text="blog.title"></h2></div>
    <div class="tag-list">
      <el-tag v-for="item in blog.blogTagList" type="success" effect="plain" :key="item.tagId">{{item.tag.name}}</el-tag>
    </div>
    <div class="info">
      <div class="author">
        <p>作者：{{blog.author?.nickname}}</p>
      </div>
      <div class="category">
        <p>分类：<el-tag>{{blog.category?.name}}</el-tag></p>
      </div>
      <div class="time">
        <p v-if="blog.blogStatus === 1">发布时间：{{blog.applyTime}}</p>
        <p v-else>暂未发布</p>
      </div>
    </div>
    <div class="ql-editor" v-html="blog.content"></div>
  </div>
</el-dialog>
</template>

<style scoped lang="scss">
@import "quill/dist/quill.snow.css";
.ql-container{
  width: 80%;
  margin: 20px auto;
  .title{
    text-align: center;
  }
  .tag-list{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .info{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .ql-editor{
    border-top: 1px solid #ccc;
    color: black;
    font-size: 16px;
    :deep(img){
      max-width: 100%;
      height: auto;
    }
  }
}
</style>
